<template>
  <div class="drawer-title-box clearfix">
    <slot name="title">
      <span class="fl drawer-title-box-title">{{title}}</span>
    </slot>
    <div class="fr">
      <slot name="action">
        <el-button type="primary" :disabled="disabled" @click="handleConfirm">确定</el-button>
        <el-button type="danger" @click="handleCancel">取消</el-button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DrawerTitle',
  props:{
    title:{
      type:String,
      default:''
    },
    disabled:{
      type:Boolean,
      default: false
    }
  },
  methods:{
    handleConfirm() {
      this.$emit('confirm')
    },
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="scss">
.drawer-title-box {
  height: 60px;
  line-height: 60px;
  padding: 0;
  border-bottom: 1px solid #e6ebf5;
  box-sizing: border-box;

  .drawer-title-box-title {
    color: #222222;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
